<style lang="less">
</style>

<template>
  <div>
    <el-button type="primary" style="margin-bottom: 10px;" @click="addClick" :disabled="id === null || btnDisabled">新增</el-button>
    <el-table
      :data="tableData"
      border
      v-loading="listLoading"
      height="250"
      style="width: 100%">
      <el-table-column type="index" width="55">
      </el-table-column>
      <el-table-column
        prop="startGraded"
        :label="'阶梯起始（'+unit+'）'"
        width="180">
      </el-table-column>
      <el-table-column
        prop="endGraded"
        :label="'阶梯终止（'+unit+'）'"
        width="180">
      </el-table-column>
      <el-table-column
        label="按件（元/件）">
        <template slot-scope="scope">
          {{scope.row.chargingMode === 112015003 ? scope.row.billingUnivalence: null}}
        </template>
      </el-table-column>
      <el-table-column
        v-if="112003002 === billingType"
        label="按体积（元/方）">
        <template slot-scope="scope">
          {{scope.row.chargingMode === 112015002 ? scope.row.billingUnivalence: null}}
        </template>
      </el-table-column>
      <el-table-column
        v-if="112003001 === billingType"
        label="按重量（元/吨）">
        <template slot-scope="scope">
          {{scope.row.chargingMode === 112015001 ? scope.row.billingUnivalence: null}}
        </template>
      </el-table-column>
      <el-table-column
        label="操作">
        <template slot-scope="scope">
          <el-button type="primary" @click="modifyClick(scope.row)" :disabled="btnDisabled">修改</el-button>
          <el-button type="danger" @click="deleteClick(scope.row.id)" :disabled="btnDisabled">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <standard-price-version-price-add :billing-type="billingType" ref="standardPriceVersionPriceAdd" @comfirmSuccess="comfirmSuccess"></standard-price-version-price-add>
  </div>
</template>

<script>
import {
  getAllStandardPriceVersionLinePrices,
  deleteStandardPriceVersionLinePrice,
  createStandardPriceVersionLinePrice
} from '../../../api/freight/StandardPriceVersionLinePrice';
import StandardPriceVersionPriceAdd from './StandardPriceVersionPriceAdd.vue';
export default {
  components: {StandardPriceVersionPriceAdd},
  name: 'StandardPriceVersionPrice',
  componentName: 'StandardPriceVersionPrice',
  data () {
    return {
      id: null,
      listLoading: false,
      tableData: []
    };
  },
  props: {
    billingType: Number,
    unit: String,
    btnDisabled: Boolean
  },
  methods: {
    comfirmSuccess (o) {
      o.billingType = this.billingType;
      createStandardPriceVersionLinePrice(this.id, o)
        .then(res => {
          if (res.data.successFlg) {
            this.$message('保存成功！');
            this.$refs.standardPriceVersionPriceAdd.hide();
            this.load();
          } else {
            this.$message.error(res.data.errorMsg);
          }
        });
    },
    addClick () {
      this.$refs.standardPriceVersionPriceAdd.show();
    },
    modifyClick (row) {
      this.$refs.standardPriceVersionPriceAdd.show(row);
    },
    deleteClick (id) {
      this.$confirm('您确认删除该价格?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteStandardPriceVersionLinePrice(id)
          .then(res => {
            if (res.data.successFlg) {
              this.$message('删除成功！');
              this.load();
            } else {
              this.$message.error(res.data.errorMsg);
            }
          });
      }).catch(() => {});
    },
    show (id) {
      this.id = id;
      this.load();
    },
    clear () {
      this.id = null;
      this.tableData = [];
    },
    load () {
      if (this.id) {
        this.listLoading = true;
        getAllStandardPriceVersionLinePrices({
          filters: 'EQ_standardPriceVersionLine.id=' + this.id + ';EQ_billingType=' + this.billingType,
          sorts: '+startGraded'
        }).then(res => {
          this.listLoading = false;
          if (res.data.successFlg) {
            this.tableData = res.data.detailModelList;
          } else {
            this.$message.error(res.data.errorMsg);
          }
        });
      }
    }
  }
};
</script>
